<template>
	<div class="dec-deployment-card">
		<div class="dec-deployment-card-header">
			<span class="color-danger">* </span>
			<div class="icon-add" @click="clickPlus">
				<el-icon color="#8992a5" size="14"><Plus /></el-icon>
			</div>
			<div v-if="showMinus" class="icon-add" @click="clickMinus">
				<el-icon color="#8992a5" size="14"><Minus /></el-icon>
			</div>
			<el-select
				v-if="selectType === 'select'"
				v-model="selectValue"
				:placeholder="placeholder"
				:clearable="true"
				size="large"
				style="width: 290px"
				@change="handleChange"
			>
				<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-input 
				v-else 
				v-model="selectValue" 
				@input="handleChange" 
				:rows="3" 
				type="textarea" 
				:placeholder="placeholder" 
				show-word-limit
				:maxlength="2000"/>
			<el-input 
				v-model="textValue" 
				@input="handleInput" 
				:rows="3" 
				type="textarea" 
				:placeholder="textPlaceholder"
				show-word-limit
				:maxlength="2000"/>
		</div>
		<div class="dec-deployment-card-footer flex gap-2">
			<span><span class="color-danger">* </span>佐证材料上传 </span>
			<el-upload
				v-model:file-list="fileList"
				class="upload-demo"
				:action="baseURL + '/admin/sys-file/upload'"
				:on-change="handleUpload"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
				:before-upload="beforeUpload"
				:on-exceed="(files,uploadFiles)=>handleExceed(files,uploadFiles,3)"
				:limit="3"
				:headers="headers"
				:accept="fileType.join(',')"
			>
				<el-button type="primary" icon="Upload">点击上传</el-button>
				<template #tip>
					<div class="el-upload__tip">仅支持上传{{fileType.join('/')}}格式文件，文件不能超过200MB </div>
				</template>
			</el-upload>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { Session } from '/@/utils/storage';
import { ElMessage } from 'element-plus'

export default defineComponent({
	name: 'DecDeploymentCard',
	props: {
		placeholder: {
			type: String,
			default: '请输入',
		},
		textPlaceholder: {
			type: String,
			default: '请输入',
		},
		selectType: {
			type: String,
			default: 'select',
		},
		selectOptions: {
			type: Array,
			default: () => [],
		},
		selectVal: {
			type: String,
			default: '',
		},
		textVal: {
			type: String,
			default: '',
		},
		showMinus: {
			type: Boolean,
			default: true,
		},
    id:{
			type: Number,
			default: 1,
    },
		fileUrl: {
			type: String,
			default: '',
		},
		fileName: {
			type: String,
			default: '',
		},
		fileType:{
			type:Array,
			default:()=>{
				return ['.jpg','.jpeg','.png']
			}
		},
		fileSize:{
			type:Number,
			default:200
		}
	},
	setup(props, { emit }) {
		const headers = computed(() => {
			return {
				Authorization: 'Bearer ' + Session.get('token'),
				'TENANT-ID': Session.getTenant(),
			};
		});
		const fileList = ref([]);
		const selectValue = ref(props.selectVal);
		const textValue = ref(props.textVal);
		const fileType = ref(props.fileType)

		function handleChange(val) {
			emit('leftChange', val);
		}
		function handleInput(val) {
			emit('rightChange', val);
		}
		function clickPlus() {
			emit('clickPlus');
		}
		function clickMinus() {
			emit('clickMinus');
		}
    function handleUpload(){
      emit('uploaded',fileList,props.id)
    }
    function handleSuccess(){
      // emit('uploaded',fileList)
    }
    function handleRemove(){
      emit('uploaded',fileList,props.id)
    }
		function beforeUpload(file) {
			const { size, type } = file;
			console.log(type)

			if (props.fileType.length) {
				const fileName = file.name.split('.');
				const fileExt = `.${fileName[fileName.length - 1]}`;
				const isTypeOk = props.fileType.includes(fileExt);
				if (!isTypeOk) {
					ElMessage.error(`文件格式错误，请上传 ${props.fileType.join(',')} 格式的文件`);
					return false;
				}
			}

			const maxSize = 1024 * 1024 * props.fileSize; // 例如，限制为 200MB
			if (size > maxSize) {
				ElMessage.error(`文件大小超过限制，请选择小于 ${props.fileSize}MB 的文件`);
				return false;
			}
			return true;
		}

		watch(()=>[props.fileUrl,props.fileName],
			newValue =>{
				if(newValue&&newValue[0]){
					let urlData = newValue[0].split(',')
					let nameData = newValue[1].split(',')
					urlData.forEach((item,index)=>{
						fileList.value.push({
							url:item,
							name:nameData[index]
						})
					})
				}
			},
			{ immediate: true}
		)
		
		
		function handleExceed(files,uploadFiles,limit){
			ElMessage.warning(`最多上传${limit}个文件!`)
		}
		return {
			fileList,
			fileType,
			selectValue,
			textValue,
      headers,
			handleExceed,
			beforeUpload,
			handleChange,
			clickPlus,
			clickMinus,
			handleInput,
      handleUpload,
      handleSuccess,
      handleRemove,
		};
	},
});
</script>

<style scoped lang="scss">
.dec-deployment-card {
	border: dashed 1px #dcdfe6;
	background-color: #f7f8fa;
	padding: 10px 20px;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	.dec-deployment-card-header {
		display: flex;
		align-items: center;
		gap: 20px;
		.icon-add {
			min-height: 20px;
			min-width: 22px;
			line-height: 18px;
			border-radius: 50%;
			border: 2px solid #8992a5;
			text-align: center;
			cursor: pointer;
		}
	}
	.dec-deployment-card-footer {
		padding: 0 80px;
		box-sizing: border-box;
	}
}
</style>
